﻿@using SkyLinq.Web.Models
@model LogModel
@{
    ViewBag.Title = "Index";
}
<style type="text/css">
    .bar { background-color:blue; border: 1px solid black; height:10px;}
</style>
@foreach (string[] report in Model.GetReports()) { 
    <div><a href="Javascript:getReport('/api/logapi/@report[0]')">@report[1]</a></div>
}
<div id="rpt"></div>
@section scripts {
<script src="@Url.Content("/Scripts/d3.min.js")" data-main="Scripts/main"></script>
<script type="text/javascript">
    function getReport(apiUrl) {
        d3.select("#rpt").html("");
        d3.csv(apiUrl, function (data) {
            console.log(data);
            var max = d3.max(data, function (d) { return +d.Hits; })
            var div = d3.select("#rpt").selectAll("div")
                .data(data)
                .enter()
                .append("div").classed("row", true);

            div.append("div").classed("col-md-6", true).text(function (d) { return d.Url; });
            div.append("div").classed("col-md-1", true).style("text-align", "right").text(function (d) { return d.Hits; });
            div.append("div").classed("col-md-5", true).append("div").classed("bar", true).style("width", function (d) { return (d.Hits / max * 400) + "px"; });
            //    .html(function (d) { return "<div>" + d.URIStem + "</div><div>" + d.count + "</div>"; })
        });
    };
</script>
}

